    <template>
      <el-dialog v-model="dialogVisible" title="新增人员" width="30%" :close-on-click-modal="false" :destroy-on-close="true"
        custom-class="el-dialog" style="margin-top:2.5vh">
        <el-form :model="addManagerInfo" :rules="rules" label-width="100px"
          style="padding-right:6vh;height: 75vh;overflow: auto;" ref="addManagerForm">
          <el-form-item label="姓名：" prop="nickname">
            <el-input v-model="addManagerInfo.nickname" placeholder="请输入新增人员姓名"></el-input>
          </el-form-item>
          <el-form-item label="邮箱：" prop="email">
            <el-input v-model="addManagerInfo.email" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item label="手机号：" prop="phone">
            <el-input v-model="addManagerInfo.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="账号：" prop="username">
            <el-input v-model="addManagerInfo.username" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item label="密码：" prop="password">
            <el-input v-model="addManagerInfo.password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="状态：" prop="status">
            <el-select v-model="addManagerInfo.status" placeholder="请选择人员状态">
              <el-option v-for="(item, index) in statuOptions" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <!--  -->
          <el-form-item label="备注：" prop="remark">
            <el-input v-model="addManagerInfo.remark" placeholder="请输入备注"></el-input>
          </el-form-item>
          <el-form-item label="角色：" prop="roleNameList">
            <el-select v-model="addManagerInfo.roleId" placeholder="请选择人员角色" multiple>
              <el-option v-for="(item, index) in roleNameList" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="addManagerSubmit"> 确认 </el-button>
          </span>
        </template>
      </el-dialog>

    <el-dialog v-model="dialogVisible2" title="修改角色" width="30%" :close-on-click-modal="false" :destroy-on-close="true"
      custom-class="el-dialog" style="margin-top:2.5vh">
      <el-form :model="updateRolesInfo" label-width="100px"
      style="padding-right:6vh;height: 75vh;overflow: auto; "  ref="updateRolesForm">
        <el-form-item>
          <el-select v-model="role" placeholder="请选择人员角色"  clearable multiple>
              <el-option v-for="(item) in roleNameList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
          <span class="dialog-footer">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="updateRolesSubmit"> 确认 </el-button>
          </span>
        </template>
    </el-dialog>


    </template>
<script setup>
  import { ref } from 'vue'
  import { addLoserManager, listRole,getRoleByUserId,updateUserRole } from '@/api/sys/manager.js'
  import { ElMessage } from "element-plus";
  import { regionData } from 'element-china-area-data'

  const atUserId = ref()

  // 状态选择
  const statuOptions = [
    {
      value: '0',
      label: '启用',
    },
    {
      value: '1',
      label: '禁用',
    }
  ]

  const dialogVisible = ref(false)  // 弹窗是否显示
  const dialogVisible2 = ref(false)  // 弹窗是否显示 角色

  function cancel(){
    dialogVisible2.value = false
    role.value = []
    roleNameList.value = []
  }

  // 添加人员表单数据
  let addManagerInfo = ref({
    nickname: '张三',  // 姓名
    email: 'zhangsan@qq.com',  // 邮箱
    phone: '17633971563', // 手机号
    username: 'zhangsan', // 账号
    password: 'zhangsan', // 密码
    status: '', // 状态
    remark: '', // 备注
    roleId: '', // 角色id
  })

  let updateRolesInfo = ref({
    roleIds:''
  })

  // 角色信息
  let role = ref([])
  
  // 表单校验规则，需要和表单的prop属性对应
  const rules = {
    nickname: [
      { required: true, message: '姓名不能为空', trigger: 'blur' }
    ],
    email: [
      { type: 'email', message: '请输入有效邮箱地址', trigger: 'blur' }
    ],
    phone: [
      { required: true, message: '请输入手机号', trigger: 'blur' },
      { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
    ],
    username: [
      { required: true, message: '账号不能为空', trigger: 'blur' },
      { min: 5, max: 18, message: '账号长度在5-18位', trigger: 'blur' }
    ],
    password: [
      { required: true, message: '密码不能为空', trigger: 'blur' },
      { min: 6, max: 18, message: '用户名长度在6-18位', trigger: 'blur' }
    ],
    status: [
      { required: true, message: '请选择状态', trigger: 'blur' },
    ],
  }
  // 获取角色列表
  let roleNameList = ref([])
  const getRoleList = async () => {
    let res = await listRole()
    res.data.data.forEach((item, index) => {
      roleNameList.value.push({ value: item.roleId, label: item.roleName })
    })
  }

  // 获取当前用户下的所有角色
  const getATRoleList =  async (id) => {
    let res = await getRoleByUserId(id)
    res.data.data.forEach((item, index) => {
      role.value.push(item.roleId)
    })
  }

  // 提交+校验
  let addManagerForm = ref()
  const emit = defineEmits(['success'])
  // 添加人员确定按钮事件
  const addManagerSubmit = async () => {
    await addManagerForm.value.validate()
    let res = await addLoserManager(addManagerInfo.value)
    dialogVisible.value = false
    addManagerInfo.value = [] // 清空表单
    ElMessage({
      message: '添加成功',
      type: 'success',
    })
    emit('success')
  }

  let updateRolesForm = ref()
  const updateRolesSubmit = async () => {
    
    let res = await updateUserRole(atUserId.value,role.value)
    dialogVisible2.value = false
    updateRolesForm.value = [] // 清空表单
    ElMessage({
      message: '修改成功',
      type: 'success',
    })
    emit('success')
  }



  // 组件对外暴露一个方法 open，基于open传来的参数，区分添加还是编辑
  // open({})  => 表单无需渲染，说明是添加
  // open({ id, cate_name, ... })  => 表单需要渲染，说明是编辑
  // open调用后，可以打开弹窗
  const open = (row) => {
    dialogVisible.value = true
    getRoleList()
    // addManagerInfo.value = { ...row } // 添加 → 重置了表单内容，编辑 → 存储了需要回显的数据
  }

  const openURole = (id) => {
    dialogVisible2.value = true
    getRoleList()
    role.value =[]
    roleNameList.value=[]
    getATRoleList(id)
    atUserId.value = id
    // addManagerInfo.value = { ...row } // 添加 → 重置了表单内容，编辑 → 存储了需要回显的数据
  }

  

  // 向外暴露方法
  defineExpose({
    open,
    openURole
  })
</script>
<style lang="scss" scoped>
  .el-dialog {
    margin: 0 auto !important;
    height: 90%;
    overflow: hidden;
  }
</style>
